<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AJS PM2.5</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>

<div class="mui-inner-wrap">

<header class="mui-bar mui-bar-nav">
    <a data-openwin="about" href="html/about.html" class="mui-icon mui-icon-info-filled mui-pull-left" ></a>
        <h1 class="mui-title">AJS PM2.5</h1>
    <a href="html/city.html" data-openwin="city"  class="mui-icon mui-icon-location mui-pull-right" ></a>
</header>

<div class="mui-content">
    <ul class="mui-table-view">
        <li data-tpl class="mui-table-view-cell mui-media">
            <img class="mui-media-object mui-pull-left" src="img/1.png">
            <div class="mui-media-body">
                <span data-bind="title">城市.地点</span>
                <p data-bind="intro" class='mui-ellipsis'>空气质量</p>
            </div>
        </li>
    </ul>
</div>

</div>
</body>

<script type="text/javascript" src="js/ajs.min.js" ></script>
<script type="text/javascript">

$(function(){
    var tpl = $('[data-tpl]').hide();
    var c = tpl.parent();
    var city = $.getUrlParam('city');
    if (!city) city = '杭州';
    searchPm(city);
    function searchPm(city){
        var url = "http://www.pm25.in/api/querys/pm2_5.json?callback=?&city="+city+"&token=5j1znBVAsnSf5xQyNQyq";
        $.get(url,function(req){
            $(req).each(function(idx,el){
                var tl = tpl.clone().show();
                var r = Math.floor(Math.random()*10+3);
                tl.find('img').attr('src','img/'+r+'.png');

                tl.find('[data-bind=title]').text(el.area+"."+el.position_name);
                tl.find('[data-bind=intro]').text(el.quality+" "+el.primary_pollutant);
                c.append(tl);
            })
        })
        tpl.hide();
    }
    
    
    $('[data-openwin]').on('click',function(e){                
        api.closeWin({
            animation: {
                type: 'none',
                subType: 'from_left',
                duration: 300
            }
        });

        var url = $(this).attr('href');
        var name = $(this).attr('data-openwin');
        $.openWin(url,name);
        return false;
    })
    
})
</script>
</html>
